<template>
  <div class="client_side" v-show="!isHide && !resizeHide">
    <img src="../../assets/images/startpage/mcloud-logo-small.png">
    <a href="#" @click="isDownload()" class="alink" ref="downloadLink">点击体验和彩云客户端</a>
    <div class="delete" @click="hide()"></div>
  </div>
</template>
<script>
  import $ from 'jquery'

  import { handleMobileType } from '../../common'

  export default {
    data () {
      return {
        isHide: JSON.parse(window.sessionStorage.getItem('clientIsHide')) || false,
        clickTime: 0,
        delayTime: 0,
        mobileType: 0, // 手机类型
        location: '', // 下载地址
        resizeHide: false
      }
    },
    methods: {

      // 点击x隐藏此组件
      hide () {
        this.isHide = true

        /*
        * 需求： 在用户点击了隐藏之后 此次会话过程中所有的页面不再显示此组件
        * 思路： 利用sessionStorage实现flag传递 在重新打开页面的时候重置 所以选择sessionStorage
        * */
        window.sessionStorage.setItem('clientIsHide', 'true')
      },

      // 确定下载的链接
      handleDownloadLink () {
        this.mobileType = handleMobileType()
        switch (this.mobileType) {
          case 1:
            this.$refs.downloadLink.href = 'https://itunes.apple.com/cn/app/cai-yun/id544673497?mt=8'
            break
          case 2:
            this.$refs.downloadLink.href = 'android'
            break
          default:
            this.$refs.downloadLink.href = 'weixin'
        }
      },

      // 对组件进行定位
      setPosition () {
        let h = $(window).height()
        $(window).resize(() => {
          if ($(window).height() < h) {
            this.resizeHide = true
          } else {
            this.resizeHide = false
          }
        })
      },

      // 判断手机上是否已经下载客户端，如果下载了就直接打开，否则跳转应用市场开始下载
      isDownload () {
        // window.location是属性 使用这个是在本页面打开链接
        // window.open是方法  使用这个是在新的页面打开链接
        if (this.mobileType === 1) {
          // ios打开app

          $('body').append('<iframe src="mcloud://" style="display:none" id="ifr"></iframe>')

          window.setTimeout(function () {
            $('#ifr').remove()
          }, 3000)
        } else if (this.mobileType === 2) {
          window.location = 'mcloud://' // Android打开app的链接 软件协议
          this.clickTime = new Date().getTime()
          setTimeout(() => {
            this.delayTime = new Date().getTime()
            if (this.delayTime - this.clickTime < 2000) {
              // 打开app需要一定的时间 如果时间间距小于2s 说明手机里面没有app
              // 如果没有这个app 直接进行下载
              window.location = 'Android下载地址'
              console.log('Android 没有app')
            }
          }, 0)
        }
      }
    },
    mounted () {
      this.setPosition()
      this.handleDownloadLink()
    }
  }
</script>
<style scoped>
  .client_side {
    width: 7.5rem;
    height: 1.54rem;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    bottom: 0;
    text-align: left;
    padding-left: 1.22rem;
  }

  .client_side .alink {
    display: inline-block;
    color: #fff;
    font-size: 0.3rem;
  }

  .client_side img {
    width: 0.85rem;
    height: 0.85rem;
    margin: 0.32rem 0.35rem 0 0;
    vertical-align: -100%;
  }

  .client_side .delete {
    width: 0.35rem;
    height: 0.35rem;
    background: url('../../assets/images/client/close.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0.16rem;
    right: 0.16rem;
  }
</style>
